<template>
  <div class="container">
    <a-spin tip="Loading..." :spinning="loading">
      <div class="operate_cont" @keyup.enter="handleLogin()">
        <span class="title">{{ appName }}</span>
        <a-form-model
          :model="form"
          :rules="rules"
          :label-col="labelCol"
          :wrapper-col="wrapperCol"
          ref="ruleForm"
          v-if="!showForgetPwdCom"
        >
          <a-form-model-item prop="mobile">
            <a-input
              v-model.trim="form.mobile"
              placeholder="手机号"
              autocomplete="username"
              @change="changeEncryPass"
            >
              <a-icon slot="prefix" type="phone" />
            </a-input>
          </a-form-model-item>
          <a-form-model-item prop="password">
            <a-input
              v-model.trim="form.password"
              placeholder="密码"
              type="password"
              autocomplete="current-password"
              @change="changeEncryPass"
            >
              <a-icon slot="prefix" type="lock" />
            </a-input>
          </a-form-model-item>
          <a-form-model-item>
            <div class="remenber_">
              <div>
                <a-checkbox v-model="form.rememberPass">记住密码</a-checkbox>
              </div>
              <div>
                <a-button type="link" @click="toggleForgetPwd"
                  >忘记密码</a-button
                >
              </div>
            </div>
          </a-form-model-item>
          <a-form-model-item>
            <a-button
              class="loginbtn"
              type="primary"
              size="small"
              @click="handleLogin()"
              >登录</a-button
            >
          </a-form-model-item>
        </a-form-model>
        <div v-else>
          <resetPwd
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            @cancel="toggleForgetPwd"
          ></resetPwd>
        </div>
      </div>
    </a-spin>
  </div>
</template>
<script>
// import md5 from "js-md5";
import { RE_PHONE } from "@/utils";
// import loginApi from "@/api/login";
// import { mapActions } from "vuex";
// import { initialRouter } from "@/router";
import resetPwd from "./resetPwd";

export default {
  data() {
    return {
      appName: process.env.VUE_APP_NAME,
      labelCol: { span: 24 },
      wrapperCol: { span: 24 },
      loading: false,
      form: {
        mobile: "",
        password: "",
        rememberPass: false
      },
      showForgetPwdCom: false,
      encryPass: true, //密码是否需要加密处理
      rules: {
        mobile: [
          { required: true, message: "请输入手机号", trigger: "blur" },
          {
            pattern: RE_PHONE,
            message: "请输入正确的手机号",
            trigger: "change"
          }
        ],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
        rememberPass: [{ required: false }]
      }
    };
  },
  components: {
    resetPwd
  },
  mounted() {
    let loginInfo = localStorage.getItem("loginInfo");
    if (loginInfo) {
      this.form = JSON.parse(loginInfo);
      this.encryPass = false;
    } else {
      this.encryPass = true;
    }
  },
  methods: {
    changeEncryPass() {
      this.encryPass = true;
    },
    handleLogin() {
      this.$refs["ruleForm"].validate((valid) => {
        if (valid) {
          // this.login(this.form, this.rememberPass); //登录成功
          this.$router.replace("/index");
        } else {
          return false;
        }
      });
    },
    login(form, callBack) {
      // this.loading = true;
      // let data = {
      //   mobile: form.mobile,
      //   password: !this.encryPass ? form.password : md5(form.password),
      //   loginType: 0
      // };
      // loginApi
      //   .login(data)
      //   .then((res) => {
      //     this.saveUserInfo(res.data);
      //     //保存账户信息
      //     callBack && callBack(form);
      //   })
      //   .catch((err) => {
      //     this.loading = false;
      //     this.$message.error(err.message);
      //   });
    },
    saveUserInfo(data) {
      if (!data) return;
      // this.$store
      //   .dispatch("user/saveUserInfo", {
      //     token: data.token.token,
      //     member: data.member
      //   })
      //   .then(() => {
      //     //调用init &  路由 接口
      //     this.init();
      //   })
      //   .catch((err) => {
      //     this.loading = false;
      //     console.log(err);
      //   });
    },
    init() {
      // return loginApi
      //   .init()
      //   .then((res) => {
      //     if (res.data.spaceList && res.data.spaceList.length) {
      //       this.$store.dispatch("user/setRoleAuth", res.data.isSuperAdmin);
      //       initialRouter(res.data.isSuperAdmin ? ROLE.super : undefined);
      //       this.$store.dispatch("setSpaceTree", res.data.spaceList);
      //       this.$router.replace({
      //         path: "/space/list"
      //       });
      //       this.loading = false;
      //       eventTracking.userLogin();
      //     } else {
      //       this.$message.error("账号权限错误，请联系管理员！");
      //     }
      //   })
      //   .catch((err) => {
      //     this.loading = false;
      //     this.$message.error(err.message);
      //   });
    },
    rememberPass(form) {
      //登陆后的回调  处理’记住密码‘功能
      // if (form.rememberPass) {
      //   let data = {
      //     mobile: form.mobile,
      //     password: !this.encryPass ? form.password : md5(form.password),
      //     rememberPass: form.rememberPass
      //   };

      //   localStorage.setItem("loginInfo", JSON.stringify(data));
      // } else {
      //   localStorage.removeItem("loginInfo");
      // }
    },
    toggleForgetPwd() {
      this.showForgetPwdCom = !this.showForgetPwdCom;
    }
  }
};
</script>
<style scoped lang="less">
/deep/.ant-btn-primary {
  background-color: #1b69fd;
}

.container {
  width: 100%;
  height: 100%;
  background: url("~@/assets/images/bg.png") center center no-repeat;
  background-size: 100% 100%;
  display: flex;
  align-items: center;
  flex-direction: column;
  .operate_cont {
    width: 360px;
    margin-top: 36%;
    // padding: 10px 10px 0px 10px;
    display: flex;
    flex-direction: column;
    align-items: center;

    .title {
      font-size: 33px;
      line-height: 33px;
      font-size: 33px;
      font-weight: 600;
      letter-spacing: 1px;
      margin: 50px 0;
      color: rgba(48, 49, 51, 1);
    }
    .remenber_ {
      display: flex;
      justify-content: space-between;
      flex-wrap: nowrap;
    }

    .loginbtn {
      width: 290px;
      height: 31.5px;
    }
  }
}
</style>
